<template>
  <div id="hrList">
    <el-input size="small" @keyup.enter.native="searchHandle" style="width: 300px" v-model="keywords"
              placeholder="搜索企业用户账号、真实姓名或所属公司名称"></el-input>
    <el-button @click="searchHandle()" style="margin-left: 10px" type="primary" icon="el-icon-search" size="small">搜索
    </el-button>
    <div style="display: inline-block;margin-left: 20px;font-size:14px;">
      筛选：
      <el-radio v-model="hasAuth" label='0' @change="searchHandle">未审核</el-radio>
      <el-radio v-model="hasAuth" label='2' @change="searchHandle">未通过</el-radio>
    </div>
    <el-table
        height="536"
        :data="hrList"
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 99.5%">
      <el-table-column
          label="序号"
          align="center"
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          label="企业用户账号"
          prop="userName"
          align="center"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="真实姓名"
          align="center"
          prop="realName"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="认证公司"
          align="center"
          prop="companyName"
          show-overflow-tooltip
          width="200%">
      </el-table-column>
      <el-table-column
          label="担任职位"
          align="center"
          prop="position"
          show-overflow-tooltip
          width="100%">
      </el-table-column>
      <el-table-column
          label="认证材料"
          align="center"
          show-overflow-tooltip>
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" :href="scope.row.authUrl">下载</el-link>
        </template>
      </el-table-column>
      <el-table-column
          label="发起时间"
          prop="createTime"
          sortable
          align="center"
          width="170%"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          width="260%">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="light" content="详细信息" placement="top">
            <el-button size="mini" @click="hrInfo(scope.row.userId)" type="info" class="iconfont icon-xiangqing"/>
          </el-tooltip>
          <el-tooltip v-show="hasAuth!='2'" class="item" effect="light" content="审核通过" placement="top">
            <el-button @click="aduit(scope.row.companyName,scope.row.userId,scope.row.userName,'pass')" size="mini"
                       class="iconfont icon-shenhetongguo" type="success"></el-button>
          </el-tooltip>
          <el-tooltip v-show="hasAuth!='2'" class="item" effect="light" content="审核不通过" placement="top">
            <el-button @click="aduit(scope.row.companyName,scope.row.userId,scope.row.userName,'noPass')" size="mini"
                       class="iconfont icon-shenhebutongguo" type="danger"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="企业用户信息" :visible.sync="dialogTableVisible">
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item label="企业用户账号">{{ this.hr.userName }}</el-descriptions-item>
        <el-descriptions-item label="真实姓名">{{ this.hr.realName }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <el-avatar :src="this.hr.photoUrl"></el-avatar>
        </el-descriptions-item>
        <el-descriptions-item label="昵称">{{ this.hr.pickName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ this.hr.sex }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ this.hr.age }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ this.hr.liveCity }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ this.hr.tel }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ this.hr.email }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ this.hr.state == 1 ? '启用' : '禁用' }}</el-descriptions-item>
        <el-descriptions-item label="认证材料地址">
          <el-link icon="el-icon-download" :underline="false" type="primary" :href="this.hr.authUrl">下载</el-link>
        </el-descriptions-item>
        <el-descriptions-item label="所在公司">{{ this.hr.companyName }}</el-descriptions-item>
        <el-descriptions-item label="公司职位">{{ this.hr.position }}</el-descriptions-item>
        <el-descriptions-item label="个人介绍">{{ this.hr.introduce }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-pagination
        background
        layout="total,prev, pager, next"
        :total="total"
        align="center"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :hide-on-single-page="value"
        style="padding-top: 15px"
    >
    </el-pagination>
  </div>
</template>

<script>
import {auditCompanyUser, getAuthUserList, getOrginCompany,} from "../../network/admin";

export default {
  name: "CompanyUserAudit",
  data() {
    return {
      hrList: [],
      loading: true,
      keywords: '',
      value: true,
      currentPage: 1,
      total: 1,
      pageSize: 9,
      userType: 1,
      dialogTableVisible: false,
      hr: {},
      hasAuth: '0',
      company:""
    }
  },

  created() {
    this.handleCurrentChange(this.currentPage);
  },
  methods: {
    handleCurrentChange(currentPage) {
      getAuthUserList(this.keywords, currentPage, this.pageSize, parseInt(this.hasAuth)).then(res => {
        this.loading = false;
        this.total = res.data.data.total;
        this.hrList = res.data.data.list;
        this.currentPage = currentPage;
      });
    },
    searchHandle() {
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage)
    },
    aduit(authCompanyName,userId, userName, result) {
      getOrginCompany(authCompanyName).then(res => {
        if(res!=null){
          this.company = res.data.data;
          if(this.company.hasAuth==1){
            auditCompanyUser(userId, result).then(res => {
              if (res != undefined) {
                if (res.data.data == "pass") {
                  this.$message.success(userName + "审核通过");
                } else if (res.data.data == "noPass") {
                  this.$message.warning(userName + "审核不通过");
                }
                this.handleCurrentChange(this.currentPage);
              }
            })
          }else if(this.company.hasAuth==0){
            this.$message.warning("该公司还未审核，请先完成审核");
          }
        }
      });
    },
    indexMethod(index) {
      return (this.currentPage - 1) * this.pageSize + 1 + index;
    },
    hrInfo(hrId) {
      this.hr = this.hrList.find((hr) => hr.userId == hrId);
      this.dialogTableVisible = true;
    }
  }
}
</script>

<style>
.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  min-width: 130px;
  height: 50px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 50px;
  margin-bottom: 0;
  width: 40%;
}

.el-form-item__content {
  height: 50px;
}
</style>